import { useState, useEffect, } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { View, Text, Button, Image } from '@tarojs/components'
import { xiedajiao, liuying } from '../../tools'
import logo from '../../static/yntx-logo.png'

function Blog() {

  useDidShow(() => {
    const page = Taro.getCurrentInstance().page
    const scope = page.selectComponent('#customTabBar')

    if (typeof scope.getTabBar === 'function' && scope.getTabBar()) {
      console.log('useDidShow');
      scope.getTabBar().$component.setState({
        selected: 0
      })
    }
  })

  const girls = [
    { id: 1, name: "谢大脚" },
    { id: 2, name: "刘英" },
    { id: 3, name: "迪丽热巴" },
    { id: 4, name: "吴晨熙" },
  ]
  const zhujueNum = 1

  const [blogTitle, setBlogTitle] = useState('借力好风的博客')
  const [introduce, setIntroduce] = useState('测试参数传递')

  const [articleList, setArticleList] = useState([])


  useEffect(() => {
    xiedajiao()
    liuying()
  }, [])

  // 跳转首页
  const gotoIndex = () => {
    // navigateTo 跳转到目的页面，打开新页面
    // redirectTo 跳转到目的页面，在当前页面打开
    // switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
    // navigateBack 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
    // reLaunch 关闭所有页面，打开到应用内的某个页面  

    Taro.navigateTo({ url: '/pages/index/index?blogTitle=' + blogTitle + '&introduce=' + introduce })
    // Taro.redirectTo({ url: '/pages/index/index })
  }

  // 获取数据
  const testHandler = () => {
    Taro.request({
      url: 'https://apiblog.jspang.com/default/getArticleList'
    }).then(res => {
      console.log(res.data)
      setArticleList(res.data.list)
    })
  }

  return (
    <View>
      <Text>Blog Page</Text>
      <Button onClick={gotoIndex}>我要去Index页面</Button>
      <View>
        {/* 图片引入方式1 */}
        <Image src={logo} width="100px" height="100px"></Image>
        {/* 图片引入方式2 */}
        <Image src={require('../../static/yntx-logo.png')} width="100px" height="100px"></Image>
      </View>

      {
        girls.map((item, index) => {
          return (
            <View key={index}>{item.id}:{item.name}</View>
          )
        })
      }

      {/* 错误 */}
      {/* <view>
        {
        if(zhujueNum===1){
            return ('玉田')
        }else{
            return('刘能')
        }
       }
      </view> */}

      {/* 正确 三元运算符 */}
      <view>
        男主角是：{zhujueNum == 1 ? '玉田' : '刘能'}
      </view>
      {/* 正确 短路运算符 */}
      {/* <view>
        男主角是：{zhujueNum == 1 && '玉田' || '刘能'}
      </view> */}

      {/* 获取数据 */}
      <Button onClick={testHandler}>获取列表</Button>
      {/* 遍历文章列表 */}
      {/*
        articleList.map((item, index) => {
          return (
            <View key={index}>- {item.title}</View>
          )
        }) */}

    </View>
  )
}

export default Blog


